<script setup lang="ts">
import { reactive, onMounted } from 'vue'

interface property {
  isChange: boolean
  current: number
  land: string
  round: any
  comp: Record<string, string>
}

defineProps({
  id: {
    type: Number,
    default: 1
  },
  row: {
    type: Number,
    default: 1
  },
  col: {
    type: Number,
    default: 1
  },
  size: {
    type: Number,
    default: 1
  },
  num: {
    type: Number,
    default: 1
  }
})

onMounted(() => {
    remderDom()
})

const af = reactive<property>({
  isChange: false,
  current: 0,
  land: 'https://wimg.588ku.com/gif620/20/07/06/16181476c32d1262a0d77a16ba9e4357.gif',
  round: [],
  comp: {}
})

// 渲底地图
function temp(data: number) {
  return Array.from({ length: data }, (_, i) => i + 1)
}

// 渲染 地雷随机数 和 动态样式
function remderDom(): void {
    // const min = 1
    // 遍历出 n 个 随机数
    // af.round = Array.from({ length: 1 }, () =>
    //   Math.floor(Math.random() * 9 + min)
    // )
    // console.log('地雷编号', af.round)
}

// 点击开始游戏
const changeCard = (e: any) => {
  af.current = e
  af.isChange = !af.isChange
  af.round.filter((item: any) => {
    if (item === e + 1) {
      console.log(item, '地雷')
    }
  })
}

const changeCard_ = (e: number) => (af.current = e)

// 随机数 中 如果 有 包含索引
// const round = computed(() => af.round.includes(af.current + 1))
</script>
<template>
  <!-- 设置游戏参数页面  -->
  <div
    class="game"
    :style="{
      width: (row / col) * size + 40 + 'px'
    }"
  >
    <!-- 正面内容 -->
    <span
      v-if="!af.isChange"
      class="front bg"
      v-for="(item, index) in temp(row)"
      @click="changeCard(index)"
      :key="item"
      :style="{
        width: size + 'px',
        height: size + 'px',
        lineHeight: size + 'px',
        fontSize: size / 4 + 'px'
      }"
    >
      <span v-if="af.current !== index">{{ item }}</span>
    </span>
    <!-- 反面内容 -->
    <span
      v-if="af.isChange"
      class="front pin"
      v-for="(item, index) in temp(row)"
      :key="item"
      @click="changeCard_(index)"
      :class="[af.current === index ? 'pin' : 'wh']"
      :style="af.comp"
    >
      <!-- current 等于 当前的索引 且 选出 包含 地雷的 -->
      <template v-if="af.current === index ? 'pin' : 'wh'">
        <img :src="af.land" />
      </template>
      <span v-if="af.current !== index">{{ item }}</span>
    </span>
  </div>
</template>
<style scoped lang="scss">
.game {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  perspective: 1000px;
  /* .front .back {
    backface-visibility: hidden;
    transition: transform 0.6s ease;
  } */
  .front {
    margin: 5px;
    padding: 5px;
    text-align: center;
  }
}
.pin {
  background-image: linear-gradient(
    to right,
    #ff8177 0%,
    #ff867a 0%,
    #ff8c7f 21%,
    #f99185 52%,
    #cf556c 78%,
    #b12a5b 100%
  );
}

.wh {
  background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}

.bg {
  background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
}
</style>
